<template>
  <!-- <div color="$el-color-primary">home</div> -->
  <!-- <el-button type="primary" v-go="'/digitalTwin'">大屏</el-button> -->
  <!-- <el-card style="max-width: 480px">
    <template #header>Tesseract.js</template>
    <el-image style="width: 100%" :src="testPng" />
  </el-card>

  <el-card style="max-width: 480px">
    <template #header>Tesseract.js</template>
    <el-image style="width: 100%" :src="testPng" />
  </el-card> -->
  <el-row>
    <el-col :span="6">
      <div class="p-10">
        <el-card style="max-width: 100%">
          <template #header>大屏</template>
          <el-image v-go="'/digitalTwin'" style="width: 100%; cursor: pointer" :src="digitalTwinPng" />
        </el-card>
      </div>
    </el-col>
    <el-col :span="18">
      <div class="p-10">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="flex justify-between items-center">
              <span>Tesseract.js</span>
              <el-button type="primary" @click="recognize">识别图片文字</el-button>
            </div>
          </template>
          <div class="flex">
            <el-image style="width: 58.3%" :src="tesseractjpg" />
            <div class="w-[40%] pl-10">{{ recognizeText }}</div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { createWorker } from 'tesseract.js'
import tesseractjpg from '@/assets/imgs/tesseractjpg.jpg'
import digitalTwinPng from '@/assets/imgs/digitalTwin.jpg'
// Tesseract.recognize(test, 'eng+chi_sim').then(({ data: { text } }) => {
//   console.log('识别结果:', text)
// })
// ;(async () => {
//   const worker = await createWorker('chi_sim', 1, {
//     langPath: '/js',
//     corePath: `${import.meta.env.BASE_URL}js/tesseract-core-simd-lstm.wasm.js`,
//     workerPath: `${import.meta.env.BASE_URL}js/worker.min.js`,
//   })
//   const ret = await worker.recognize(testPng)
//   console.log(ret.data.text)
//   await worker.terminate()
// })()
const recognizeText = ref('')
const recognize = async () => {
  const worker = await createWorker('chi_sim', 1, {
    // langPath: '/js',
    corePath: `${import.meta.env.BASE_URL}js/tesseract-core-simd-lstm.wasm.js`,
    workerPath: `${import.meta.env.BASE_URL}js/worker.min.js`,
  })
  const ret = await worker.recognize(tesseractjpg)
  recognizeText.value = ret.data.text
  console.log(ret.data.text)
  await worker.terminate()
}
</script>
<style scoped></style>
